<template>
	<view class="content">
		<image src="../../static/login/zhanghaotip.png" class="zhanghaotishi"></image>
		<view class="name-box">
			<input type="text" v-model.trim="name" class="name-input" />
		</view>
		<view class="wwid-box">
			<input type="text" v-model.trim="wwid" class="name-input" />
		</view>
		<view class="login-btn" @click="loginBtn">

		</view>
		<view class="chakanguize" @click="seeGuiZe">

		</view>

		<!-- 弹窗规则 -->
		<view class="mark-box animated" :class="tipShow?'fadeIn':'fadeOut'" v-if="tipShow">
			<image src="../../static/login/tip.png" class="tips"></image>
			<view class="close-btn" @click="closeGuiZe">

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				wwid: '',
				tipShow: false
			}
		},
		onLoad() {

		},
		onShow() {
			var uri = window.location.href.split('?')[1];
			console.log(uri)
			if (uri) {

			} else {

			}
		},
		methods: {
			seeGuiZe() {
				this.tipShow = true
			},
			closeGuiZe() {
				this.tipShow = false
			},
			loginBtn() {
				uni.showLoading({
					title: 'loading',
					mask: true
				})
				console.log('name', this.name)
				console.log('wwid', this.wwid)
				if (this.name && this.wwid) {
					/* 云验证账号 */
					uniCloud.callFunction({
						name: 'login',
						data: {
							name: this.name,
							wwid: this.wwid
						},
						success: (res) => {
							console.log(res)
							// debugger
							if (res.result.data.length > 0) {
								uni.hideLoading()
								uni.setStorageSync('name', res.result.data[0].name)
								uni.setStorageSync('wwid', res.result.data[0].wwid)
								uni.setStorageSync('userID', res.result.data[0]._id)
								uni.navigateTo({
									url: '../begin/begin'
								})
							} else {
								uni.hideLoading()
								uni.showToast({
									title: '姓名和WWID错误',
									icon: 'error'
								})

							}

						}
					})

				} else {
					uni.hideLoading()
					uni.showToast({
						title: '请输入姓名和WWID',
						icon: 'none'
					})
				}


			}
		}
	}
</script>

<style scoped>
	page {
		background: url(../../static/login/bg1.jpg) no-repeat center top;
		background-size: 100% auto;
	}


	.zhanghaotishi {
		width: 216rpx;
		height: 40rpx;
		margin-top: 586rpx;
	}

	.name-box {
		width: 484rpx;
		height: 82rpx;
		background: url(../../static/login/name.png) no-repeat center center;
		background-size: 100% 100%;
		margin-top: 66rpx;
		position: relative;
	}

	.wwid-box {
		width: 484rpx;
		height: 82rpx;
		background: url(../../static/login/wwid.png) no-repeat center center;
		background-size: 100% 100%;
		margin-top: 30rpx;
		position: relative;
	}

	.login-btn {
		width: 526rpx;
		height: 126rpx;
		background: url(../../static/login/login.png) no-repeat center center;
		background-size: 100% 100%;
		margin-top: 20rpx;
	}

	.chakanguize {
		width: 292rpx;
		height: 34rpx;
		background: url(../../static/login/huodongguize.png) no-repeat center center;
		background-size: 100% 100%;
		margin-top: 56rpx;
	}

	.name-input {
		width: 316rpx;
		height: 56rpx;
		position: absolute;
		top: 50%;
		left: 140rpx;
		transform: translateY(-50%);
		color: #fff;
		font-size: 28rpx;
	}

	.mark-box {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tips {
		width: 566rpx;
		height: 784rpx;
		margin-top: 166rpx;
	}

	.close-btn {
		width: 70rpx;
		height: 72rpx;
		background: url(../../static/login/close.png) no-repeat center center;
		background-size: 100% 100%;
		margin-top: 50rpx;
	}
</style>
